.collapsed{
    background-color: #bebbbb;
}
.navbar-center{
    a{
        color: #888888;
    }
    a:hover{
        color: #e02929;
    }
}
header{
    .navbar{
        margin-bottom: 0%;
    }
    img{
        margin-top: 8px;
    }
    .navbar-right{
        width: 40px;
        height: 40px;
        margin: auto;
        margin-top: -45px;
        border: 1px solid #b0b0b0;
        border-radius: 50%;
        line-height: 28px;
        text-align: center;
        position: relative;

        .two{
            width: 20px;
            height: 20px;
            line-height: 20px;
            background-color: #d63427;
            color: white;
            font-size: 8px;
            text-align: center;
            border-radius: 50%;
            position: absolute;
            top: -5px;
            left: 30px;
        }
    }
}
.top{
    padding-top: 1px;
    background-image: url("/images/images02.png");
    background-repeat: no-repeat;
    background-size: 100%;
    
    .container{
        .swiper{
            .item{
                margin: 0 auto;
                text-align: center;
                h1{
                    color: white;
                    font-size: 63px;
                    background-color: rgba(16, 213, 244, 0.46);
                    width: 50%;
                    margin: auto;
                    margin-top: 375px;
                    letter-spacing: 27px
                }
                p{
                    font-size: 16px;
                    color: white;
                    text-transform: uppercase;
                    margin-top: 18px;
                }
                .but{
                    width: 167px;
                    height: 49px;
                    border-radius: 50px;
                    background-color: #eb1f1f;
                    border: none;
                    color: white;
                    font-size: 20px;
                    margin-top: 186px;
                }
            }
            .team-pagination{
                position: static;
                margin-top: 72px;
                margin-bottom: 80px;
                .swiper-pagination-bullet{
                    background:#fff;
                    border-radius: 50%;
                    opacity: unset;
                }
                .swiper-pagination-bullet-active{
                    background: #fcac45;
                }
            }
        }
    }
}
.personal{
    padding-top: 120px;
    padding-bottom: 132px;
    background: #f2f2f2;
    text-align: center;

    h1{
        color: black;
        font-weight: bold;
        font-size: 70px;
    }
    h2{
        font-size: 20px;
        color: #7e7e7e;
        margin-top: 45px;
    }
}
.content{
    .nest{
        display: flex;
        justify-content: space-around;

        .boxone{
            width: 49%;
            height: 351px;
            line-height: 351px;
            text-align: center;
            background-image: url(../images/man.jpg);
            background-size:100% 100%;
            color: white;
            font-size: 27px;
        }
        .boxtwo{
            width: 24%;
            height: 351px;
            line-height: 351px;
            text-align: center;
            background-image: url(../images/images01.jpg);
            background-size:100% 100%;
            color: white;
            font-size: 27px;
        }
        .boxthree{
            width: 24%;
            height: 351px;
            line-height: 351px;
            text-align: center;
            background-image: url(../images/bag1.webp);
            background-size:100% 100%;
            color: white;
            font-size: 27px;
        }
    }
    .list{
        display: flex;
        justify-content: space-around;
        margin-top: 12px;
        .boxfour{
            width: 24%;
            height: 351px;
            line-height: 351px;
            text-align: center;
            background-image: url(../images/cofe.jpg);
            background-size:100% 100%;
            color: white;
            font-size: 27px;
        }
        .boxfive{
            width: 24%;
            height: 351px;
            line-height: 351px;
            text-align: center;
            background-image: url(../images/bag2_03.jpg);
            background-size:100% 100%;
            color: white;
            font-size: 27px;
        }
        .boxsix{
            width: 49%;
            height: 351px;
            line-height: 351px;
            text-align: center;
            background-image: url(../images/images03.jpg);
            background-size:100% 100%;
            color: white;
            font-size: 27px;
        }
    }
}
.center{
    margin: 0 auto;
    text-align: center;
    .title{
        color: black;
        font-weight: bold;
        font-size: 58px;
        margin-top: 79px;
    }
    .container{
        display: flex;
        justify-content: center;
        margin: 0 auto;
        .item{
            text-align: center;
            margin-top: 45px;
            .images{
                width: 270px;
                height: 300px;
                position: relative;

                .tejia{
                    width: 60px;
                    height: 60px;
                    line-height: 60px;
                    font-size: 20px;
                    color: #ef4c4c;
                    border: 2px solid #ef4c4c;
                    border-radius: 50%;
                    position: absolute;
                    top: 0;
                    left: 0;
                }
                .shouqing{
                    width: 60px;
                    height: 60px;
                    line-height: 60px;
                    font-size: 20px;
                    color: #2ac4e5;
                    border: 2px solid #2ac4e5;
                    border-radius: 50%;
                    position: absolute;
                    top: 0;
                    left: 0;
                }
                
            }
    
            .dress{
                color: #989898;
                font-size: 18;
            }
    
            .dress-two{
                color: #505050;
                font-size: 22px;
            }
    
            .textone{
                color: #ef4c4c;
                font-size: 18px;
                margin-right: 10px;

                span{
                    color: #989898;
                    text-decoration: line-through;
                }
            }
            .text{
                color: #989898;
                font-size: 18px;
            }
        }
    }
}
.new{
    margin: 0 auto;
    text-align: center;
    padding-top: 39px;

    .title{
        height: 105px;
        line-height: 105px;
        color: black;
        font-weight: bold;
        font-size: 29px;
        background-color: #f2f2f2;
    }

    .item-one{
        padding-bottom: 152px;
        background-image: url(../images/cofe.jpg);
        background-repeat: no-repeat;
        background-size: 100%;
        margin-top: 10px;
        opacity: 1;
        .text{
            width: 85%;
            color: white;
            font-size: 22px;
            margin-left: 30px;
            text-align: left;
        }
        .time{
            color: white;
            font-size: 13px;
            margin-top: 20px;
            text-align: left;
            margin-left: 30px;
        }
    }
    .item-one:hover{
        opacity: 0.6;
        
    }
    .item-two{
        padding-bottom: 152px;
        background-image: url(../images/look.jpg);
        background-repeat: no-repeat;
        background-size: 100%;
        margin-top: 10px;
        .text{
            width: 85%;
            color: white;
            font-size: 22px;
            margin-left: 30px;
            text-align: left;
        }
        .time{
            color: white;
            font-size: 13px;
            margin-top: 20px;
            text-align: left;
            margin-left: 30px;
        }
    }
    .item-two:hover{
        opacity: 0.6;
        
    }
    .item-three{
        padding-bottom: 152px;
        background-image: url(../images/look2.jpg);
        background-repeat: no-repeat;
        background-size: 100%;
        margin-top: 10px;
        .text{
            width: 85%;
            color: white;
            font-size: 22px;
            margin-left: 30px;
            text-align: left;
        }
        .time{
            color: white;
            font-size: 13px;
            margin-top: 20px;
            text-align: left;
            margin-left: 30px;
        }
    }
    .item-three:hover{
        opacity: 0.6;
        
    }
}
.logon{
    background: #f2f2f2;
    text-align: center;
    padding-top: 100px;
    margin-top: 10px;
    padding-bottom: 106px;

    h1{
        color: black;
        font-weight: bold;
        font-size: 58px;
    }
    h2{
        width: 90%;
        font-size: 23px;
        color: #7e7e7e;
        margin: 0 auto;
        margin-top: 36px;

    }
    .email{
        width: 50%;
        height: 60px;
        line-height: 60px;
        margin: 0 auto;
        margin-top: 50px;
        background-color: white;
        border: none;
        border-radius: 50px;
        position: relative;

        input{
            height: 60px;
            position: absolute;
            left: 27px;
            top: 0px;
            border-radius: 50px;
            border: none;
            color: #7e7e7e;
            font-size: 24px;
        }
        button{
            position: absolute;
            right: 9px;
            top: 6px;
            width: 168px;
            height: 49px;
            line-height: 49px;
            font-size: 24px;
            background-color: #eb1f1f;
            border-radius: 50px;
            border: none;
            color: white;
        }
    }
}
footer{
    background-color: #242424;
    margin-top: 10px;
    padding-top: 85px;
    padding-bottom: 66px;
    display: flex;
    justify-content: space-between;

    .footer-left{
        margin-left: 50px;
        .left-one{
            display: flex;
            img{
                width: 14px;
                height: 14px;
                background-color: white;
                margin-top: 3px;
            }
            .text{
                color: white;
                font-size: 14px;
                white-space: pre;
            }
        }
        .textone{
            color: white;
            font-size: 14px;
            white-space: pre;
        }
        .left-two{
            display: flex;
            margin-top: 20px;
            .numone{
                color: white;
                font-size: 14px;
                white-space: pre;
            }
            .numtwo{
                color: white;
                font-size: 14px;
                white-space: pre;
                margin-left: 14px;
                border-bottom: 2px solid #c9c9c9;
            }
        }
        .texttwo{
            font-size: 14px;
            color: #5b5b5b;
            margin-top: 21px;
        }
        .textthree{
            font-size: 14px;
            color: #5b5b5b;
        }
        .textfour{
            font-size: 14px;
            color: #5b5b5b;
        }
    }
    .footer-one{
        li{
            line-height: 30px;
            a{
                color: white;
                text-transform: uppercase
            }
        }
    }
    .footer-two{    
        li{
            line-height: 30px;
            a{
                color: white;
                text-transform: uppercase
            }
        }
    }
    .footer-right{
        margin-right: 79px;
    }
}

@media screen and (max-width: 768px){
    .top{
        .container{
            .swiper{
                .item{
                    h1{
                        width: 70%;
                        font-size: 55px;
                        margin-top: 347px;
                        letter-spacing: 25px;
                    }
                    p{
                        font-size: 26px;
                    }
                    .but{
                        margin-top: 94px;
                    }
                }
            }
        }
    }
    .personal{
        margin: 0 auto;
        margin-top: -60px;

        h2{
            font-size: 26px;
            width: 95%;
            margin: 0 auto;
        }
    }
    .content{
        .nest{
            .boxone{
                height: 260px;
                line-height: 260px;
            }
            .boxtwo{
                height: 260px;
                line-height: 260px;
            }
            .boxthree{
                height: 260px;
                line-height: 260px;
            }

        }
        .list{
            .boxfour{
                height: 260px;
                line-height: 260px;
            }
            .boxfive{
                height: 260px;
                line-height: 260px;
            }
            .boxsix{
                height: 260px;
                line-height: 260px;
            }
        }
    }
    .center{
        .container{
            .item{
                .images{
                    margin-left: 40px;
                }
            }
        }
    }
    .new{
        .item-one{
            .text{
                font-size: 35px;
            }
            .time{
                font-size: 25px;
            }
        }
        .item-two{
            .text{
                font-size: 35px;
            }
            .time{
                font-size: 25px;
            }
        }
        .item-three{
            .text{
                font-size: 35px;
            }
            .time{
                font-size: 25px;
            }
        }
    }
    
}
@media screen and (max-width: 380px){
    .top{
        .container{
            .swiper{
                .item{
                    h1{
                        width: 80%;
                        font-size: 30px;
                        margin-top: 130px;
                        letter-spacing: 11px;
                    }
                    p{
                        font-size: 17px;
                        margin-top: 10px;
                    }
                    .but{
                        width: 120px;
                        height: 30px;
                        font-size: 15px;
                        margin-top: 0;
                    }
                }
            }
        }
    }
    .personal{
        h1{
            font-size: 32px;
        }
        h2{
            font-size: 14px;
            
        }
    }
    .content{
        .nest{
            .boxone{
                height: 200px;
                line-height: 200px;
            }
            .boxtwo{
                height: 200px;
                line-height: 200px;
            }
            .boxthree{
                height: 200px;
                line-height: 200px;
            }

        }
        .list{
            .boxfour{
                height: 200px;
                line-height: 200px;
            }
            .boxfive{
                height: 200px;
                line-height: 200px;
            }
            .boxsix{
                height: 200px;
                line-height: 200px;
            }
        }
    }
    .new{
        .item-one{
            .text{
                font-size: 20px;
            }
            .time{
                font-size: 12px;
            }
        }
        .item-two{
            .text{
                font-size: 20px;
            }
            .time{
                font-size: 12px;
            }
        }
        .item-three{
            .text{
                font-size: 20px;
            }
            .time{
                font-size: 12px;
            }
        }
    }
    .logon{
        h2{
            font-size: 16px;
        }
        .email{
            width: 80%;
            height: 50px;
            input{
                height: 50px;
                font-size: 18px;
            }
            button{
                width: 90px;
                height: 40px;
                line-height: 40px;
                font-size: 18px;
            }
        }
    }
    footer{
        display: flex;
        flex-wrap: wrap;

        .footer-one{
            width: 50%;
            margin: 0 auto;
            margin-top: 20px;
            text-align: center;
        }
        .footer-two{
            width: 50%;
            margin: 0 auto;
            margin-top: 20px;
            text-align: center;
        }
        .footer-right{
            margin: 0 auto;
            margin-top: 20px;
        }
    }
}